<template>
  <div class="checkboxForm-container">
    <el-form-item :label="title" :prop="prop">
      <el-checkbox-group
        v-model="radio"
        :disabled="disabled"
        @change="changeValue"
      >
        <el-checkbox
          v-for="(item, index) in items"
          :key="index"
          :label="item.label"
        >
          {{ item.value }}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </div>
</template>
<script>
  import { computed, watch } from 'vue'
  export default {
    name: 'checkboxForm',
    props: {
      title: String,
      items: Array,
      modelValue: String,
      prop: String,
      disabled: Boolean,
    }, // [{label: null, value: null}]
    setup(props, context) {
      let radio = computed({
        get() {
          if (props.modelValue) {
            return props.modelValue.split(',')
          }
          return []
        },
        set(val) {
          context.emit('update:modelValue', val.join(','))
        },
      })
      function changeValue() {
        // context.emit('checkboxFormChange')
      }
      watch(
        () => props.modelValue,
        (val, preVal) => {
          context.emit('checkboxFormChange', { val, preVal })
        }
      )
      return {
        radio,
        changeValue,
      }
    },
  }
</script>
<style lang="scss" scope>
  .checkboxForm-container {
    overflow: hidden;
    margin-top: 20px;

    .el-form-item__label {
      color: #303133;
      padding: 0px auto;
      font-size: 17px;
    }
    .el-checkbox-group {
      padding-left: 12px;
      display: flex;
      flex-direction: column;
      .el-checkbox {
        margin-top: 6px;
      }
    }
  }
</style>
